<template>
  <div class="summary">
    <el-tabs v-model="active" type="card" @tab-click="switchActive(active)">
      <el-tab-pane label="本周小结" name="week">
        <div class="content">
          <vuescroll :ops="ops">
            <ul class="list">
              <li  v-for="(item,index) in weekSummary" :key="index">
                <div class="title ">
                  <i></i>一周小结({{item.startTime}}-{{item.endTime}})
                </div>
                <p class="info ellipsis2">
                  {{item.summaryMsg}}
                </p>
              </li>
            </ul>
          </vuescroll>
        </div>
      </el-tab-pane>
      <el-tab-pane label="本月小结" name="month">
        <div class="content">
          <vuescroll :ops="ops">
            <ul class="list">
              <li v-for="(item ,index) in monthSummary" :key="index">
                <div class="title ">
                  <i class="yb"></i>本月小结({{item.startTime}}-{{item.endTime}})
                </div>
                <p class="info ellipsis2">
                  {{item.summaryMsg}}
                </p>
              </li>
            </ul>
          </vuescroll>
        </div>
      </el-tab-pane>
    </el-tabs>
    <div class="swith-week">
      <div class="swith-week-inner">
        <el-date-picker
          v-if="active=='week'"
          v-model="month_time"
          type="month"
          @change="switch_week_fn"
          placeholder="选择时间" :clearable="false" :editable="false">
        </el-date-picker>
        <el-date-picker
          v-if="active=='month'"
          v-model="year_time"
          type="year"
          @change="switch_month_fn"
          placeholder="选择时间" :clearable="false" :editable="false">
        </el-date-picker>
      </div>
    </div>
  </div>
</template>

<script>
  import vuescroll from 'vuescroll'

  export default {
    name: "Summary",
    components: {
      vuescroll
    },
    data() {
      return {
        active: 'week',//week:周 month：月
        ops: {
          vuescroll: {
            wheelDirectionReverse: false,//true：横向滚动，false：竖向滚动
            wheelScrollDuration: 0,//滚动速度
            mode: 'native',
            sizeStrategy: 'percent',
            detectResize: true
          },
          scrollPanel: {
            scrollingX: false,//启用横屏滚动
            scrollingY: true,//关闭竖向滚动
          },
          rail: {
            background: '#e5ebf1',
            opacity: 1,
            size: '6px',
            borderRadius: '6px',
            gutterOfEnds: '100px',//轨道距 x 和 y 轴两端的距离
            gutterOfSide: '0px'//距离容器的距离
          },
          bar: {
            onlyShowBarOnScroll: false,//是否只在滚动时显示bar
            background: '#cbd5df',
            keepShow: true,
            size: '4px',
            minSize: false
          }
        },//滚动配置
        month_time: '',//周的时间
        year_time: '',//月的时间
        monthSummary:[],//月小结
        weekSummary:[],//周小结
      }
    },
    created(){
      this.year_time=new Date();
      this.month_time=new Date();
      this.active==this.$route.query.type;
      if(this.active=='week'){
        this.queryWeekSummary();
      }else if(this.active=='month'){
        this.queryMonthSummary();
      }
    },
    methods: {
      switchActive(){
        if(this.active=='week'){
          this.queryWeekSummary();
        }else if(this.active=='month'){
          this.queryMonthSummary();
        }
      },
      switch_week_fn(){
        console.log(this.month_time);

        this.queryWeekSummary();
      },
      switch_month_fn() {
        this.queryMonthSummary();
      },
      //每月小结
      queryMonthSummary() {
        this.$http.get('project/project/count/pcMonthSummary', {
          params: {
            companyId: this.$store.state.userInfo.companyId,
            year:this.year_time.Format('yyyy')
          }
        }).then(res=>{
          if(res.statusCode==200){
          this.monthSummary=res.data;
          }else {
            this.$message.error(res.statusMsg)
          }
        })
      },
      //每周小结
      queryWeekSummary() {
        this.$http.get('project/project/count/pcWeekSummary', {
          params: {
            companyId: this.$store.state.userInfo.companyId,
            year:this.month_time.Format('yyyy'),
            month:this.month_time.Format('MM'),
          }
        }).then(res=>{
          if(res.statusCode==200){
            this.weekSummary=res.data;
          }else {
            this.$message.error(res.statusMsg)
          }
        })
      },
    }
  }
</script>

<style scoped type="text/scss" lang="scss">
  .summary {
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    border-radius: 6px;
    padding: 24px;
    position: relative;

    .content {
      height: calc(100% + 16px);
      padding-top: 20px;
      box-sizing: border-box;

      .list {
        display: flex;
        flex-wrap: wrap;

        li {
          width: calc((100% - 32px) / 3);
          height: 160px;
          background-color: #F2F6F9;
          border-radius: 6px;
          margin-right: 16px;
          margin-bottom: 16px;
          padding-left: 55px;
          padding-right: 55px;
          padding-top: 38px;
          box-sizing: border-box;

          .title {
            color: #454A55;
            font-weight: bold;
            font-size: 14px;
            padding-bottom: 28px;
            text-indent: 30px;
            position: relative;

            i {
              position: absolute;
              background-image: url("../../../../assets/img/smart/workBriefing/ic_zb.png");
              background-size: cover;
              background-position: center;
              width: 21px;
              height: 18px;
              left: 0;
              top: -2px;
            }

            i.yb {
              background-image: url("../../../../assets/img/smart/workBriefing/ic_yb.png");
              height: 19px;
            }
          }

          .info {
            font-size: 14px;
            color: #454A55;
            line-height: 20px;
          }
        }

        li:nth-child(3n) {
          margin-right: 0;
        }
      }
    }

    .swith-week {
      right: 0;
      top: 0;
      position: absolute;
      width: 210px;
      height: 65px;
      background-color: #ffffff;

      .swith-week-inner {
        width: 114px;
        height: 36px;
        position: absolute;
        bottom: 0;
        left: 73px;
      }
    }
  }
</style>
<style type="text/scss" lang="scss">
  .summary {
    .el-tabs--card {
      height: 100%;

      .el-tabs__content {
        height: calc(100% - 41px);

        .el-tab-pane {
          height: 100%;
        }
      }
    }

    .el-tabs__item {
      color: #96A2AA;
    }

    .el-tabs__item.is-active {
      color: #454A55;
    }

    .swith-week {
      .el-date-editor.el-input {
        width: 114px;
      }

      .el-input__inner {
        width: 114px;
        height: 36px;
        line-height: 36px;
        padding-right: 0;
        background-color: #F2F6F9;
        border-radius: 6px;
        border-color: #F2F6F9;
        cursor: pointer;
      }

      .el-input__icon {
        line-height: 36px;
      }
    }
  }
</style>
